<template>
    <div class="map-box">
        <divMap ref="divMap"></divMap>
        <div class="buttom-box">
            <el-button type="primary" @click="point">绘制点</el-button>
            <el-button type="primary" @click="polygon">绘制多边形</el-button>
            <el-button type="primary" @click="square">绘制正方形</el-button>
            <el-button type="primary" @click="circular">绘制圆</el-button>
            <el-button type="primary" @click="line">绘制线</el-button>
            <el-button type="primary" @click="addGeoJSON">影像地图</el-button>
            <el-button type="primary" @click="clearGeoJSON">路网地图</el-button>
        </div>
    </div>  
</template>

<script>
import divMap from '@/components/map/index.vue'
    export default {
      name: 'home',
      components:{
        divMap
      },
      data() {
        return {
            
        }
      },
      mounted(){},
      methods: {
        addGeoJSON () {
            this.$refs.divMap.changeMap('GGLayer')
        },
        clearGeoJSON () {
            this.$refs.divMap.changeMap('GGLWLayer')
        },
        point () {
            this.$refs.divMap.point()
        },
        polygon () {
            this.$refs.divMap.square()
        },
        square () {
            this.$refs.divMap.square()
        },
        circular () {
            this.$refs.divMap.circular()
        },
        line () {
            this.$refs.divMap.line()
        }
      }
  }
</script>
<style lang="scss" scoped>
.map-box{
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.buttom-box{
    position: absolute;
    bottom: 10px;
    right: 10px
}

</style>